<script setup>
import { CountTo } from 'vue3-count-to';
import useUserStore from '@/store/modules/user';
const props = defineProps({
  sesstingList: {
    type: Array,
    default: () => []
  },
  takeOrder: {
    type: String,
    default: '0'
  },
  isClient: {
    type: Boolean,
    default: false
  },
  settleData: {
    type: Object,
    default: () => {}
  }
});
const singleBill = reactive({
  title: '吃单',
  number: 10,
  money: 20
});

const getImage = (val) => {
  return new URL(`../../assets/icons/svg/${val}.svg`, import.meta.url).href;
};

const isAgent = computed(() => {
  const { isAgent } = useUserStore();
  return isAgent;
});

const isClient = computed(() => {
  const { isClient } = useUserStore();
  return isClient;
});

const commission = computed(() => {
  const { commission } = useUserStore();
  console.log(commission);
  return commission;
});
</script>

<template>
  <div class="container_box grid gap-10 grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 py-4 xl:grid-cols-4">
    <div v-for="item in sesstingList" class="con">
      <!-- 有效订单 -->
      <template v-if="item.dataValue == 'total'">
        <el-popover placement="bottom" :width="300" title="计算公式" trigger="hover">
          <template #reference>
            <div class="flex justify-between w-[100%] gap-x-[20px]">
              <div class="w-[100%] font-bold flex justify-between">
                <div class="flex flex-col justify-between">
                  <div class="w-[100%] text-end title">{{ item.title }}</div>
                  <div class="flex items-end leading-[1] flex-wrap justify-start mt-[16px] text-[#0e122e]">
                    <CountTo :start-val="0" :end-val="item.number" :duration="1000"> </CountTo>
                    <span class="ml-1">单</span>
                  </div>
                </div>

                <div class="flex flex-col justify-between">
                  <div class="text-[#0d99ff]">
                    <span class="mr-1">成功率</span>
                    <CountTo :start-val="0" :end-val="item.rate ? item.rate : 0" :duration="1000" :decimals="2"> </CountTo>
                    <span class="ml-1">%</span>
                  </div>

                  <div class="mt-[16px] text-[#fa9650]">
                    <span class="mr-1">转化率</span>
                    <CountTo :start-val="0" :end-val="item.transformRate ? item.transformRate : 0" :duration="1000" :decimals="2"> </CountTo>
                    <span class="ml-1">%</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <div>
            <div>成功率 = 成功订单 / (成功+失败)</div>
            <div class="mt-2">转化率 = 成功订单 / (成功+失败+弃单)</div>
          </div>
        </el-popover>
      </template>
      <!-- 其他 -->
      <template v-else>
        <div class="w-[100%] font-bold">
          <div v-if="item.title == '支付成功'" class="text-[#7cd81b]">{{ item.title }}</div>
          <div v-else-if="item.title == '支付失败'" class="text-[#e22d2d]">{{ item.title }}</div>
          <div v-else class="w-[100%] title">{{ item.title }}</div>
          <div class="flex justify-between mt-4">
            <div class="flex items-end leading-[1] flex-wrap justify-end text-[#0e122e]">
              <CountTo :start-val="0" :end-val="item.number" :duration="1000"> </CountTo>
              <span class="ml-1">单</span>
            </div>

            <div v-if="item.dataValue != 'total'" class="flex items-end leading-[1] flex-wrap justify-end text-[#74Beff]">
              <CountTo :start-val="0" :end-val="item.money ? item.money : 0" :duration="1000" :decimals="2"> </CountTo>
              <span class="ml-1">USD</span>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="con" v-if="!isClient && props.takeOrder">
      <el-popover placement="bottom" :width="300" title="计算公式" trigger="hover">
        <template #reference>
          <div class="flex justify-between w-[100%] gap-x-[20px]">
            <div class="w-[100%] font-bold">
              <div class="w-[100%] title">结算金额</div>
              <div class="flex justify-between mt-4">
                <div class="flex items-end leading-[1] flex-wrap justify-end text-[#0e122e]">
                  <CountTo :start-val="0" :end-val="props.settleData.number" :duration="1000"> </CountTo>
                  <span class="ml-1">单</span>
                </div>

                <div v-if="props.settleData.dataValue != 'total'" class="money flex items-end leading-[1] flex-wrap justify-end text-[#74Beff]">
                  <CountTo :start-val="0" :end-val="props.settleData.money ? props.settleData.money : 0" :duration="1000" :decimals="2"> </CountTo>
                  <span class="ml-1">USD</span>
                </div>
              </div>
            </div>
          </div>
        </template>
        <div>
          <div>结算金额 = 支付成功 + 吃单 - 退款</div>
        </div>
      </el-popover>
    </div>

    <template v-if="isAgent || isClient">
      <div v-hasPermi="['commission:*:*']" class="mr-4">
        <div class="con">
          <div class="flex justify-between w-[100%] gap-x-[20px]">
            <div class="w-[100%] font-bold flex justify-between">
              <div class="flex flex-col justify-between">
                <div class="title">抽佣信息</div>
                <div class="flex items-end leading-[1] flex-wrap justify-start mt-[16px] text-[#0f0b6b]">
                  <span>比例：{{ commission.commissionRate }}%</span>
                </div>
              </div>

              <div class="flex flex-col justify-between">
                <div class="text-[#0f0b6b]">
                  <span class="mr-1">限额</span>
                  {{ commission.commissionLimit }} USD
                </div>

                <div class="mt-[16px] text-[#0f0b6b]">
                  <span class="mr-1">金额</span>
                  {{ commission.commissionMoney }} USD
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped lang="scss">
.con {
  padding: 20px;
  padding-block: 15px;
  display: flex;
  border-radius: 4px;
  align-items: center;
  column-gap: 20px;
  justify-content: space-between;
  border: 1px solid #f4f4f4;
  border-radius: 10px;
}

.container_box {
  color: #666;
}

.title {
  color: #666;
}
 
</style>
